
{% extends "rudiment_index.html" %}
{% load staticfiles %}
{% load tz %}
{% load change %}
{% block breadcrumb %}主机信息展示{% endblock %}

{% block content %}

    <div class="row">
            <div class="well well-sm">
                {% if hostnu %}
                当前宿主机数量: <span style="color: red"><i>{{hostnu}}</i></span>
                {% else %}
                当前宿主机数量: <span style="color: red"><i>0</i></span>
                {% endif %}
                &nbsp;&nbsp;&nbsp
            </div>

    </div>

     <div class="row">
        <form class="form form-inline" action="/docker/search_build_image" method="POST">
             {% csrf_token %}
            <div class="well well-sm">
                主机名称:&nbsp;<input type="text" name="newimage" value="{{ newimage }}" class="form-control  input-sm" size="10" />
                主机ip:&nbsp;        <input type="text" name="version" value="{{ version }}" class="form-control  input-sm" size="10" />

                <div class="btn-group">
                    <input type="submit" class="btn btn-primary btn-sm" onclick="showLoading()"  value="搜索"/>
                </div>
            </div>
        </form>
    </div>



    <div id="a" style="width: 730px;height:300px;margin: 0;padding: 0">
    <div class="col-sm-offset-5 col-sm-2" style="margin-bottom: 10px"><span style="color: black"><i></i></span>  </div>

 <div id="container" style="height: 100%;margin: 0;padding: 0"></div>
<div class="col-sm-offset-5 col-sm-2" style="margin-bottom: 10px"><span style="color: black"><i>内存百分比(%)</i></span>  </div>
<div id="container1" style="height: 100%;margin: 0;padding: 0"></div>
<div class="col-sm-offset-5 col-sm-2" style="margin-bottom: 10px"><span style="color: black"><i>CPU百分比(%)</i></span>  </div>
<div id="container2" style="height: 100%;margin: 0;padding: 0"></div>
<div class="col-sm-offset-5 col-sm-2" style="margin-bottom: 10px"><span style="color: black"><i>磁盘百分比(%)</i></span>  </div>

 <div id="container3" style="height: 100%;margin: 0;padding: 0"></div>
        <div class="col-sm-offset-5 col-sm-3" style="margin-bottom: 10px"><span style="color: black"><i>IO</i><span style="color: red;margin-left: 5px">红色:I</span><span style="color: #526471;margin-left: 5px">藏青:O</span></span>  </div>


{#        <div style="margin-top: 5px;margin-left: 5px">%</div>#}
 <div id="container4" style="height: 100%;margin: 0;padding: 0"></div>
        <div class="col-sm-offset-5 col-sm-3" style="margin-bottom: 10px"><span style="color: black"><i>流量<span style="color: red;margin-left: 5px">红:进</span><span style="color:#526471;margin-left: 5px">藏青:出</span></span> </i></span>  </div>

{# <div id="container4" style="height: 100%;margin: 0;padding: 0"></div>#}
{#<div class="col-sm-offset-5 col-sm-2" style="margin-bottom: 10px"><span style="color: black"><i>出流量</i></span>  </div>#}
 <div id="container5" style="height: 100%;margin: 0;padding: 0"></div>
<div class="col-sm-offset-5 col-sm-2" style="margin-bottom: 10px"><span style="color: black"><i>默认</i></span>  </div>

   <script type="text/javascript">

       {% include 'inc_getmem.html' %}
</script>
{% endblock %}
{#var dom = document.getElementById("container");#}
{#var myChart = echarts.init(dom);#}
{#var app = {};#}
{#var y_data = []#}
{#var x_data=[]#}
{#{% for i in all_data %}#}
{#y_data.push({{ i.mem_p| cint }})#}
{#x_data.push({{ i.formatime }})#}
{#{% endfor %}#}
{##}
{#alert(y_data)#}
{#alert(x_data)#}
{#$.get("/charts/info_shows/").done(function (data) {#}
{#    if (data){#}
{#         var datas = JSON.parse(data);#}
{#         alert(data)#}
{#        option = null;#}
{#        option = {#}
{#            xAxis: {#}
{#                type: 'category',#}
{#                boundaryGap: false,#}
{#                data:datas.time#}
                {#data: ['5/min', '10/min', '15/min', '20/min']#}
{#            },#}
{#            yAxis: {#}
{#                type: 'value'#}
{#            },#}
{#            series: [{#}
{#                data: datas.mem_p#}
{##}
{#                ,#}
                {#data: [22.7, 40, 45, 50, 55, 70, 80,100],#}
{#                type: 'line',#}
{#                areaStyle: {}#}
{#            }]#}
{#        };#}
{#    ;#}

{##}
{##}
{##}
{##}
{#alert(y_data)#}
{#if (option && typeof option === "object") {#}
{#    myChart.setOption(option, true);#}

{##}
{##}
{##}
{#</script>#}
{##}
{#<script>#}
{#var dom1 = document.getElementById("container1");#}
{#var myChart1 = echarts.init(dom1);#}
{#var app1 = {};#}
{#option = null;#}
{#option = {#}
{#    xAxis: {#}
{#        type: 'category',#}
{#        boundaryGap: false,#}
{#        data: ['5/min', '10/min', '15/min', '20/min']#}
{#    },#}
{#    yAxis: {#}
{#        type: 'value'#}
{#    },#}
{#    series: [{#}
{#        data: [20, 40, 45, 50, 55, 70, 80,100],#}
{#        type: 'line',#}
{#        areaStyle: {}#}
{#    }]#}

{#;#}
{#if (option && typeof option === "object") {#}
{#    myChart1.setOption(option, true);#}

{##}
{##}
{#var dom2 = document.getElementById("container2");#}
{#var myChart2 = echarts.init(dom2);#}
{#var app2 = {};#}
{#option = null;#}
{#option = {#}
{#    xAxis: {#}
{#        type: 'category',#}
{#        boundaryGap: false,#}
{#        data: ['5/min', '10/min', '15/min', '20/min']#}
{#    },#}
{#    yAxis: {#}
{#        type: 'value'#}
{#    },#}
{#    series: [{#}
{#        data: [20, 40, 45, 50, 55, 70, 80,100],#}
{#        type: 'line',#}
{#        areaStyle: {}#}
{#    }]#}

{#;#}
{#if (option && typeof option === "object") {#}
{#    myChart2.setOption(option, true);#}

{##}
{##}
{##}
{##}
{##}
{##}
{##}
{##}
{##}
{##}
{##}
{##}
{##}
{##}
{##}
{#var dom = document.getElementById("container3");#}
{#var myChart = echarts.init(dom);#}
{#var app = {};#}
{#option = null;#}
{#option = {#}
{#    xAxis: {#}
{#        type: 'category',#}
{#        data: ['5/min', '10/min', '15/min', '20/min']#}
{#    },#}
{#    yAxis: {#}
{#        type: 'value'#}
{#    },#}
{#    series: [#}
{#        {#}
{#        data: [82, 932, 901, 934, 1290, 1330, 1320],#}
{#        type: 'line'#}
{#        },#}
{#        {#}
{#        data: [8, 92, 91, 94, 190, 130, 120],#}
{#        type: 'line'#}
{#        },#}
{##}
{#    ]#}

{#;#}
{#if (option && typeof option === "object") {#}
{#    myChart.setOption(option, true);#}

{##}
{##}
{##}
{##}
{##}
{##}
{#var dom = document.getElementById("container4");#}
{#var myChart = echarts.init(dom);#}
{#var app = {};#}
{#option = null;#}
{#option = {#}
{#    xAxis: {#}
{#        type: 'category',#}
{#        data: ['5/min', '10/min', '15/min', '20/min']#}
{#    },#}
{#    yAxis: {#}
{#        type: 'value'#}
{#    },#}
{#    series: [#}
{#        {#}
{#        data: [82, 932, 901, 934, 1290, 1330, 1320],#}
{#        type: 'line'#}
{#        },#}
{#        {#}
{#        data: [8, 92, 91, 94, 190, 130, 120],#}
{#        type: 'line'#}
{#        },#}
{##}
{#    ]#}

{#;#}
{#if (option && typeof option === "object") {#}
{#    myChart.setOption(option, true);#}

{#</script>#}
{##}
{#</div>#}


